<template>
	<view :style="{'--color':color}" v-if="showPage" class="p-bot130">
		
		<status-bar ref='statusbar' :title='title' :goHome="fromShare"></status-bar>
		<playAudio v-if="pageData.type == 1" @switchPlay="switchPlay"></playAudio>

		<playVideo v-if="pageData.type == 0" :pageData="pageData"></playVideo>
        


		<view class="row j-sa a-center m-top20 bgwhite bot">

			<view class="tab" :class="{'tabActive':tabCurrent == 0}" @click="Settab(0)" v-if="pageData.content">文稿
			</view>
			<view class="tab" :class="{'tabActive':tabCurrent == 1}" @click="Settab(1)">目录</view>
			<view class="tab " :class="{'tabActive':tabCurrent == 2}" @click="Settab(2)">留言</view>

		</view>

		<view class="rows bgwhite">
			<view class="rows padding20-30" v-if="tabCurrent == 0">
				<u-parse :content="pageData.content" :domain="$imgUrl"></u-parse>

			</view>
			<catalogue v-if="tabCurrent == 1" 
			          :goods_id="goods_id" 
					  :chapter_id="chapter_id" 
					  :info="pageData" 
					  :chapter_list="pageData.chapter_list" 
					  isPlay
				      @switchPlay="switchPlay">
			</catalogue>
			<message v-if="tabCurrent == 2" ismessage :goods_id="goods_id" :pageData="pageData.reply"
				:chapter_id="pageData.chapter_id">
			</message>
		</view>


		<view class="footer d-flex j-sb a-center">
			<view class="d-flex a-center m-left30">
				<view class="d-flex f-column a-center m-right30" @click="showService = true">
					<view class="iconfont icon-server color_33 size38"></view>
					<text class="color_33 size26">客服</text>
				</view>
				<view class="d-flex f-column a-center p-re" @click="handleShare">
					<view class="iconfont icon-fenxiang color_33 size30"></view>
					<text class="color_33 size26 m-top10">分享</text>
					<!-- <button class="share_btn" open-type="share"></button> -->
				</view>
			</view>

			<view class="btn flexac white size28 m-right30"
				@click="toUrl(`/pages/goods/goods_detail?goods_id=${goods_id}`)">查看课程详情</view>

		</view>

		<showModel @cancelFunc='showModal=false' goHome='0' v-if='showModal' type='2'></showModel>
		<showKefu v-if="showService" @cancelFunc="showService = false" @openModal="showModal = true"></showKefu>
		<SharePoster v-if='showShareQr' :myid='goods_id' type='7' :pageType='"21&gid="+goods_id' @closePoster='showShareQr=false'></SharePoster>
	</view>
</template>

<script>
	// type  0:视频  1：音频
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import playAudio from './components/playAudio/playAudio.vue';
	import playVideo from './components/playVideo/playVideo.vue';
	import message from './components/message.vue';
	import catalogue from '@/components/answer/catalogue.vue';
	import showKefu from "@/components/showKefu.vue"
	import sharePoster from '@/components/sharePoster.vue'
	export default {
		components: {
			playAudio,
			playVideo,
			message,
			catalogue,
			showKefu,
			sharePoster
		},
		data() {
			return {
				showModal:false,
				showService:false,
				showShareQr: false,
				fromShare:0,
				title: '',
				bgAudioManager: getApp().globalData.bgAudioManager,
				showPage: false,
				tablist: ['文稿', '目录', '留言'],
				tabCurrent: 0,
				chapter_id: '',
				goods_id: '',
				pageData: '',
			}
		},
		onLoad(option) {
			if (option.chapter_id) this.chapter_id = option.chapter_id;
			if (option.goods_id) this.goods_id = option.goods_id;
			if (option.fromShare) this.fromShare = option.fromShare;
			this.myClassDetail();
		},
		methods: {
			...mapMutations(['setChapter_id', 'setPlayInfo', 'setState', 'setType']),
			myClassDetail() {
				this.$showLoading('');
				this.$http.get({
					url: '/goodsLessonsApi/myClassDetail',
					data: {
						goods_id: this.goods_id,
						chapter_id: this.chapter_id
					}
				}).then(res => {
					this.$hideLoading();
					this.showPage = true;
					if (res.code != 200) return this.$Toast(res.msg);
					let info = res.data;
					this.title = info.goods_name;
					info.content = this.$common.richTxt(info.content).html;
					info.content ? this.tabCurrent = 0 : this.tabCurrent = 1;
					this.pageData = info;
					if (info.type == 0) {
						this.bgAudioManager.stop();
						return;
					}
					if (info.chapter_id == this.chapterId) return;
					this.setPlayInfo({
						playInfo: info
					});
					this.setChapter_id(info.chapter_id);
					this.setState(false);
				})
			},

			switchPlay(e) {
				if (!e) return;
				this.chapter_id = e;
				this.myClassDetail();
			},

			Settab(num) {
				console.log(num);
				this.tabCurrent = num;
			},
			handleShare(){
				if(!this.vid) return this.showModal = true
				this.showShareQr = true
			}
		},
		computed: {
			...mapState(['vid', 'bid', 'color', 'chapterId', 'current']),
		},

		onUnload() {
			if (this.pageData.type == 0) {
				this.setState(false);
				this.$saveChap(this.pageData.chapter_id, this.current);
			};

		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: this.pageData.goods_name,
				desc: this.pageData.chapter_title,
				path: `/pages/index/index?share_v_id=${this.vid}&pageType=21&gid=${this.goods_id}`,
				imageUrl: this.$imgUrls(this.pageData.img)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tab {
		color: #666666;
		font-size: 24rpx;
		padding: 30rpx 0 20rpx 0;
		position: relative;
	}

	.tabActive {
		font-size: 30rpx;
		color: #333333;
		font-weight: bold;
	}

	.tabActive::after {
		content: '';
		width: 40rpx;
		height: 2px;
		background-color: var(--color);
		position: absolute;
		bottom: 2px;
		left: 50%;
		transform: translate(-50%, 0);
	}

	.footer {
		width: 100%;
		height: 120rpx;
		background-color: #ffffff;
		position: fixed;
		left: 0;
		bottom: 0;
	}

	.btn {
		width: 480rpx;
		height: 84rpx;
		border-radius: 42rpx;
		background-color: var(--color);
	}

	.share_btn {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 10;
		background-color: transparent;
		border: none;
	}
</style>